<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="deliverynoti-container">
			<div class="normal-btn-group btn-group">
				<div class="normal-btn query-btn" @click="Model.editDialogObsolete = true">新增发票信息</div>
			</div>
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">发票信息</div>
					</div>
				</el-row>
				<el-row class="table-bg">
					<el-table :data="Model.tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
						<!-- <el-table-column type="selection" width="50" fixed></el-table-column> -->
						<el-table-column 
							v-for="item in Model.tableHeaderData"
							:key="item.prop"
							:prop="item.prop" 
							:label="item.label" 
							:width="item.width" 
							:sortable="item.sortable"
						></el-table-column>
					</el-table>
				</el-row>
				<!-- 分页 -->
				<el-row class="pagination-cont">
				    <el-pagination
						@size-change="handleSizeChange"
						background
						@current-change="handleCurrentChange"
						:current-page="Model.paginationObject.currentPage"
						:page-sizes="[10, 20, 30, 40]"
						:page-size="Model.paginationObject.pageSize"
						:pager-count="5"
						layout="sizes, prev, pager, next, jumper, slot"
						:total="Model.paginationObject.total">
						<div class="pagination-slot">
							显示
							<p class="slot-i">{{Model.paginationObject.num1}}</p>
							到
							<p class="slot-i">{{Model.paginationObject.num2}}</p>
							，共
							<p class="slot-i">{{Model.paginationObject.total}}</p>
							记录
						</div>
				    </el-pagination>
				</el-row>	
				<el-row class="bottom">
						<div class="btn_group">
              <div class="btn_item">保存</div>
							<div class="btn_item cancel" @click="goBack">取消</div>
						</div>
				</el-row>
			</div>
			<!-- 新增发票信息 -->
		<el-dialog :visible.sync="Model.editDialogObsolete" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">新增发票信息</div>
			</div>
			<div class="productBody">
				<div class="productSec">
					<el-form ref="form" size="small" :inline="false">
						<el-form-item label="发票号:" >
							<el-input class="input-cont" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="发票抬头:" >
							<el-input class="input-cont" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="发票金额:" >
							<el-input class="input-cont" placeholder=""></el-input>
						</el-form-item>
						<el-form-item label="开票日期:" >
							<el-date-picker
								type="datetime"
								placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<div class="normal-btn-group btnCenter">
						<div class="normal-btn query-btn">确认</div>
						<div class="normal-btn empty-input-btn" @click="Model.editDialogObsolete=false">取消</div>
					</div>
				</div>
			</div>
		</el-dialog>
		</div>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import pagination from "@/components/common/pagination.vue";
	import card from '@/components/common/filterBtns';
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking,
			card
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>